<template>
  <div class="topic">
    <!-- banner -->
    <Banner 
      ref="BannerRef" 
      :shopid="ShopID" 
    />
    <!-- list  -->
    <TopicList
      ref="TopicListRef"
      :shopid="ShopID" 
    />
  </div>
</template>

<script>
// @ is an alias to /src

import Banner from "@/components/topic/banner.vue";
import TopicList from "@/components/topic/list.vue"; // 热门专题

export default {
  name: "Topic",
  components: {
    Banner,
    TopicList,
  },
  data() {
    return {
      gotop: false,
      ShopID: ''
    };
  },
  mounted() {
    this.ShopID = this.$route.query.id
    this.$refs.BannerRef.getData(this.$route.query.id) // 获取热门专题列表的banner
    this.$refs.TopicListRef.getData(this.$route.query.id) // 获取热门专题列表
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 50 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>
<style scoped lang="scss">
.topic {
  margin-top: 3.75rem;
  display: flex;
  flex-direction: column;
  .top {
    z-index: 999;
    position: fixed;
    top: 45%;
    right: 8%;
    width: 4.94rem;
    height: 4.94rem;
  }
}
</style>
